<template>
  <div>
    <van-nav-bar title="支付订单"
     left-text="返回"
      left-arrow
      @click-left="onClickLeft" />
    <van-contact-card
    type="edit"
    :name="persion.name"
    :tel="persion.tel"
    @click="onEdit" />
    <div class="order-connet">
      <van-card
        v-for="(item, index) in items"
        :key="index"
        :num="item.value"
        :price="item.price"
        :title="item.name"
        :thumb="item.imgs.split('||')[0]"
      />
    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { getAddress } from '@api'
export default {
  data () {
    return {
      persion: {},
      allprice: 0,
      items: localStorage.getItem('order')
        ? JSON.parse(localStorage.getItem('order'))
        : [],
      index: this.$route.query.index
    }
  },
  created () {
    this.zongjia()
    this.getAddress()
  },
  methods: {
    getAddress () {
      getAddress().then(res => {
        if (res.data.code === 200) {
          if (this.$route.query.index) {
            this.persion = JSON.parse(res.data.data[this.index].content)
          } else {
            res.data.data.forEach(element => {
              if (JSON.parse(element.content).isDefault) {
                this.persion = JSON.parse(element.content)
                this.persion.id = element.id
              }
            })
          }
        }
      })
    },
    onEdit () {
      this.$router.push('/addressList')
    },
    onSubmit () {
      console.log('提交了')
    },
    onClickLeft () {
      history.go(-1)
    },
    zongjia () {
      const allpri = this.items.filter(item => item.checked)
      this.allprice = 0
      allpri.forEach(elem => {
        this.allprice += (elem.value * elem.price) * 100
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.van-cell {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
}
.order-connet {
  position: fixed;
  top: 130px;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow: auto;
}
</style>
